<template>
	<div class="common-dialog">
		<el-dialog
			:title="title"
			:visible.sync="flag"
			width="510px"
			center
			:before-close="closeDialog"
			:close-on-click-modal="false"
		>
			<el-form
				:model="queryForm"
				:rules="rules"
				ref="queryForm"
				label-width="100px"
				:label-position="'right'"
			>
				<el-form-item label="项目:">
					<el-input v-model="queryForm.projectName" readonly class="projectName" />
				</el-form-item>
				<el-form-item label="系列课名称:" prop="name" class="series-name">
					<el-input v-model.trim="queryForm.name" :maxlength="30" show-word-limit />
				</el-form-item>
				<el-form-item label="教学阶段:" prop="teachRange">
					<el-select
						v-model="queryForm.teachRange"
						@change="handChange($event,'teachRange')"
						class="teach-range"
					>
						<el-option
							v-for="item in teachRangeList"
							:key="item.code"
							:label="item.name"
							:value="item.code"
						/>
					</el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="confirmFn('queryForm')">确 定</el-button>
				<el-button @click="cancelFn('queryForm')">取 消</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import tagApi from "../../../../apis/rc/tag.mjs";
	export default {
		name: "courseDialog",
		props: {
			dialogFlag: {
				type: Boolean,
				default: false
			},
			/**
			 * @param {Object} defaultData
			 * @param {String} defaultData.name 系列课名称
			 * @param {String} defaultData.projectId 项目id
			 * @param {String} defaultData.projectName 项目名称
			 * @param {String} defaultData.teachRange 教学阶段
			 * @param {String} defaultData.seriesCourseId 系列课唯一标识 修改时用
			 */
			defaultData: {
				type: Object,
				default: () => {}
			},
			//操作类型 add添加 edit修改
			manner: {
				type: String,
				default: "add"
			}
		},
		data() {
			return {
				queryForm: {
					name: "", //系列课名称
					projectId: "", //项目id
					projectName: "", //项目名称
					teachRange: "", //教学阶段
					seriesCourseId: "" //项目唯一标识
				},
				rules: {
					name: [{ required: true, message: "请输入系列课名称", trigger: "blur" }],
					teachRange: [{ required: true, message: "请选择教学阶段", trigger: "blur" }]
				},
				teachRangeList: [],
				flag: this.dialogFlag
			};
		},
		watch: {
			dialogFlag(val) {
				this.flag = val;
			}
		},
		created() {
			//获取教学阶段
			this.getTeachStage();
			//获取项目名称和项目id
			if (this.manner === "add") {
				this.title = "添加系列课";
				this.queryForm.projectId = this.defaultData.projectId;
				this.queryForm.projectName = this.defaultData.projectName;
			} else {
				this.title = "修改系列课";
				this.getSeriesInfo(this.defaultData);
			}
		},
		methods: {
			//确定添加或者修改系列课
			confirmFn(form) {
				this.$refs[form].validate((valid) => {
					if (valid) {
						if (this.manner === "add") {
							this.ensureAddClass(this.queryForm);
						} else {
							this.ensureEditClass(this.queryForm);
						}
					} else {
						this.$message({
							message: "请完善信息后保存",
							type: "warn"
						});
					}
				});
			},
      //取消
			cancelFn(form) {
				this.flag = false;
				this.$refs[form].resetFields();
				this.$emit("close-dialog");
			},
      //关闭弹窗
			closeDialog() {
				this.flag = false;
				this.$refs["queryForm"].resetFields();
				this.$emit("close-dialog");
			},
			handChange(val, name) {
				this.queryForm[name] = val;
			},
			//获取教学阶段
			getTeachStage() {
				tagApi.getTeachStage({
					success: (data) => {
						this.teachRangeList = data;
					}
				});
			},
			/**获取系列课信息
			 * @param {Object} data
			 * @param {String} data.seriesCourseId 系列课ID
			 * */
			getSeriesInfo(data) {
				let params = {
					seriesCourseId: data.seriesCourseId
				};
				tagApi.getSeriesInfo({
					data: params,
					success: (data) => {
						this.queryForm.name = data.name;
						this.queryForm.teachRange = data.teachRange;
						this.queryForm.projectName = data.projectName;
						this.queryForm.seriesCourseId = data.seriesCourseId;
					}
				});
			},
			/**添加系列课
			 * @param {Object} data
			 * @param {String} data.name 系列课名称
			 * @param {String} data.projectId 项目id
			 * @param {String} data.projectName 项目名称
			 * @param {String} data.teachRange 教学阶段
			 * */
			ensureAddClass(data) {
				let params = data;
				tagApi.addCourseClass({
					data: params,
					success: () => {
						this.$emit("confirm-fn");
						this.$message({
							message: "添加成功",
							type: "success"
						});
					}
				});
			},
			/**修改系列课
			 * @param {Object} data
			 * @param {String} data.name 系列课名称
			 * @param {String} data.teachRange 教学阶段
			 * @param {String} data.seriesCourseId 系列课唯一标识 修改时用
			 */
			ensureEditClass(data) {
				let params = {};
				params.seriesCourseId = data.seriesCourseId;
				params.name = data.name;
				params.teachRange = data.teachRange;
				tagApi.editCourseClass({
					data: params,
					success: () => {
						this.$emit("confirm-fn");
						this.$message({
							message: "修改成功",
							type: "success"
						});
					}
				});
			}
		}
	};
</script>

<style lang="less" scoped>
	.projectName {
		/deep/input {
			border: none;
		}
	}
    .series-name{
        /deep/ .el-input--small .el-input__inner {
            padding-right: 47px;
        }
    }
	.teach-range {
		width: 360px;
	}
</style>
